<template>
    <div class="box" v-if="ifShow">
        <img :src="getImageUrl(url)" alt="网络错误">
        <div class="inbox">
            <h1 style="font-size: 20px;height: 10%; margin: auto" >{{ name }}</h1>
            <div style="display:flex; margin: auto;">
            <el-input-number size="small" class="num" v-model="num" :min="1" :max="10" @change="numChange" />
            </div>
        </div>
        <div class="inbox2">
            {{ price }}
        </div>
        <div style="width: 5%;margin-top: 6px;">
            <el-icon size="23" @click="close"> <Close /> </el-icon>
        </div>
    </div>
    </template>
    <script lang="ts" setup>
    import {ref ,defineProps,defineEmits} from 'vue'
    import {storeA} from '@/piniaStore/storeA'
    let piniaStoreA = storeA()
    const props = defineProps(['name', 'url', 'num','price'])
    const emit = defineEmits(['del','change'])
    const ifShow = ref(true)
    var num = ref(props.num)
    var name = props.name
    var price = props.price * num.value
    function getImageUrl(name: string):string{
    return new URL(name, import.meta.url).href;
}
    function numChange(){
        console.log(num.value)
        piniaStoreA.Cartfood.forEach((item)=>{
           if( item.name.name===name){
            item.num = num.value
           }
        })
        price = props.price * num.value
        emit('change')
    }
    function close(){
        emit("del")
    }
    
    </script>
    <style scoped>
    @media(min-width: 300px){
        .box{
        height: 100px;
        width:90%;
        margin: auto;
        display: flex;
        border-radius: 10px;
        background-color:rgb(253, 255, 240);
        margin-top: 20px;
        font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
        text-align: center;
    }
    .num{
       height: 100%;
    }
    .inbox{
        display: flex;
        flex-direction: column;
        width: 40%;
    }
    .inbox h1{
        font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    }
    .inbox2{
        width:20%;
        margin: auto;
        font-size:25px ;
        color: rgba(255, 0, 0, 0.761);
    }
    img{
    height: 100%;
    width: 30%;
    border-radius: 10px;
    }
    }
    @media(max-width: 300px){
        .box{
        height: 100px;
        width:80%;
        margin: auto;
        display: flex;
        border-radius: 10px;
        background-color:rgb(8, 236, 54);
        margin-top: 20px;
        font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
        text-align: center;
    }
    .inbox{
        display: flex;
        flex-direction: column;
        width: 40%;
    }
    .inbox h1{
        font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    }
    .inbox2{
        width:20%;
        margin: auto;
        font-size:25px ;
        color: rgba(255, 0, 0, 0.761);
    }
    img{
    height: 100%;
    width: 30%;
    border-radius: 10px;
    }
    }
    
    </style>